<template>
  <div>
    <modal-view title="抖音配置" ref="modalViewRef" width="400px" :before-submit="beforeSubmit" :loading="loading"
      @close="close">
      <el-form ref="formRef" label-width="80px" :model="formData" :rules="rules" label-position="left" size="small">
        <!-- 绑定抖音号 -->
        <el-form-item label="抖音号" prop="AwemeShortId">
          <el-input v-model="formData.AwemeShortId"></el-input>
        </el-form-item>
        <el-form-item label="抖音昵称" prop="AwemeName">
          <el-input v-model="formData.AwemeName"></el-input>
        </el-form-item>
        <el-form-item label="openid" >
          <el-input v-model="formData.OpenId" disabled></el-input>
        </el-form-item>
      </el-form>
      <template #footerLeft>
        <el-button v-if="isShowJieChu" type="danger" @click="jiechuDouYin">解除绑定</el-button>
      </template>
    </modal-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { queryGet } from "@/utils/api";
export default defineComponent({
  name: "BizUserDouYinModalView",
})
</script>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import ModalView from "@/components/ModalView";
import { appAction } from "@/store/app";
import { docType, BizUserDataClass, DouYinUserDataClass } from "@/model/BizUser";
import { request } from "@/utils/axios";
import { CmpDataClass } from "@/model/Cmp";

let emit = defineEmits<{
  (e: "close"): void;
  (e: "submit"): void
}>()

/**
 * 
 */
let loading = ref(false);

/**
 * 弹框
 */
let modalViewRef = ref();

/**
 * 表单
 */
let formRef = ref();

/**
 * 表单
 */
let formData = ref<DouYinUserDataClass>(new DouYinUserDataClass({}));

/**
 * 用用户
 */
let userData = ref<BizUserDataClass>(new BizUserDataClass({}))

/**
 * 是否展示解除绑定
 */
let isShowJieChu = ref(false);

/**
 * 表单验证
 */
let rules = reactive({
  AwemeShortId: [{ required: true, message: '当前项为必填项', trigger: 'blur' }],
  AwemeName: [{ required: true, message: '当前项为必填项', trigger: 'blur' }],
})

/**
 * 页面展示
 */
function show(data: any, douyin?: any) {
  formData.value = new DouYinUserDataClass(douyin || {});
  userData.value = new BizUserDataClass(data || {});
  isShowJieChu.value = !!formData.value.AwemeShortId;
  /**
   * 打开页面
   */
  modalViewRef.value.show();
}

/**
 *  保存前校验
 */
function beforeSubmit(): Promise<void> {

  return new Promise((resolve, reject) => {
    formRef.value.validate()
      .then(() => {

        if (formData.value.Id) {
          //存在为修改

        } else {
          //不存在ID 为新增
        }
        request("/BizUserDyAweme/Save", Object.assign({
          UserId: userData.value.Id
        }, formData.value))
          .then(() => {
            ElMessage.success("绑定成功");
            emit("submit");
            resolve();
          })
          .catch(() => {
            appAction.resetPageuuid();
            reject();
          })
      })
      .catch(reject)
  })
}

/**
 * 关闭页面
 */
function close() {
  emit("close")
}

/**
 * ====================
 *  抖音相关
 * ====================
 */

/**
 * 绑定 抖音号
 */
function bangdingDouYin() {

}

/**
 * 解除绑定 抖音号
 */
function jiechuDouYin() {
  ElMessageBox.confirm('是否解除当前抖音号绑定?')
    .then(() => {
      loading.value = true;
      request("/BizUserDyAweme/Delete", {
        UserId: formData.value.Id
      })
        .then(() => {
          ElMessage.success("解除绑定成功");
          emit("submit");
          /**
         * 打开页面
         */
          modalViewRef.value.close();
        })
        .finally(() => {
          loading.value = false;
        })
    })
}
/**
 * ====================
 *  页面初始化
 * ====================
 */

/**
 * 导出
 */
defineExpose({
  show
})
</script>

<style lang="less" scoped>
.page-tab-body {
  height: 350px;
  overflow: auto;
}

.page-shipin-list {
  display: flex;
  flex-wrap: wrap;
}

.page-shipin-none {
  padding: 20px;
}

.page-shipin-item {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 5px;
  border-radius: 3px;

  &>img {
    display: block;
    width: 150px;
    margin: 0 auto;
  }

  .page-shipin-title {
    font-size: 13px;
    margin-top: 5px;
  }
}
</style>